<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <title>区域截图</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.2);
        }

        #tip {
            color: #fff;
            font-size: 28px;
            position: fixed;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
        }

        #finish {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
        }

        #mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            cursor: crosshair;
            z-index: 2;
            pointer-events: auto;
        }

        #rect {
            position: fixed;
            z-index: 3;
            display: none;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <img id="screenshot-bg"
        style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;user-select:none;pointer-events:none;" />
    <div id="mask"></div>
    <div id="rect"></div>
    <button id="finish" style="display:none;z-index:4;position:fixed;">完成截图</button>
    <script>
        const { ipcRenderer, desktopCapturer } = require('electron');
        let mask = document.getElementById('mask');
        let rectDiv = document.getElementById('rect');
        let screenshotBg = document.getElementById('screenshot-bg');
        let startX, startY, endX, endY, dragging = false;
        let screenshotImg = null;
        // 获取全屏截图
        desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: window.screen.width, height: window.screen.height } }).then(sources => {
            screenshotImg = new window.Image();
            screenshotImg.src = sources[0].thumbnail.toDataURL();
            screenshotBg.src = screenshotImg.src; // 显示在页面上
            screenshotImg.onload = () => { /* 可选：截图加载完成后逻辑 */ }
        });
        mask.onmousedown = function (e) {
            dragging = true;
            startX = e.clientX; startY = e.clientY;
            rectDiv.style.display = 'block';
            rectDiv.style.left = startX + 'px';
            rectDiv.style.top = startY + 'px';
            rectDiv.style.width = '0px';
            rectDiv.style.height = '0px';
        };
        mask.onmousemove = function (e) {
            if (!dragging) return;
            endX = e.clientX; endY = e.clientY;
            const x = Math.min(startX, endX);
            const y = Math.min(startY, endY);
            const w = Math.abs(endX - startX);
            const h = Math.abs(endY - startY);
            rectDiv.style.left = x + 'px';
            rectDiv.style.top = y + 'px';
            rectDiv.style.width = w + 'px';
            rectDiv.style.height = h + 'px';
        };
        mask.onmouseup = function (e) {
            dragging = false;
            document.getElementById('finish').style.display = 'block';
        };
        document.getElementById('finish').onclick = function () {
            // 截取选区区域
            if (!screenshotImg) return;
            const x = parseInt(rectDiv.style.left);
            const y = parseInt(rectDiv.style.top);
            const w = parseInt(rectDiv.style.width);
            const h = parseInt(rectDiv.style.height);
            let canvas = document.createElement('canvas');
            canvas.width = w; canvas.height = h;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(screenshotImg, x, y, w, h, 0, 0, w, h);
            const base64 = canvas.toDataURL('image/png');
            ipcRenderer.send('eyedropper-capture-finish', base64);
        };
    </script>
</body>

</html>